<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{margin: 0;padding: 0;text-decoration: none;box-sizing: border-box;list-style: none;}
        .box{margin:50px auto;width: 700px;min-height:500px ;background-color: antiquewhite;border: 2px solid #666;}
         h2{width: 100%;text-align: center;line-height: 50px;color: red;font-family: '楷体';font-size: 30px;}
        .allUsers,.bigAge,.heightFen{text-align: center;line-height: 30px;font-size: 16px;border: 1px dashed #ccc;}
        span{display: block;float:left;width: 33.3%;border: 1px dashed #ccc;height: 30px;}
    </style>
</head>
<body>
    <div class="box">
        <h2></h2>
        <div class="allUsers"></div>
        <h2></h2>
        <div class="bigAge"></div>
        <h2></h2>
        <div class="heightFen"></div>
    </div>
    <script>
        function fun(min,max){
            return Math.floor(Math.random()*(max-min+1)+min)
        }
        var data=[
            {
                name:'李华',
                age:fun(18,40),
                fenshu:fun(60,100)

            },
            {
                name:'张三',
                age:fun(18,40),
                fenshu:fun(60,100)

            },
            {
                name:'李四',
                age:fun(18,40),
                fenshu:fun(60,100)

            },
            {
                name:'王五',
                age:fun(18,40),
                fenshu:fun(60,100)

            },
            {
                name:'李明',
                age:fun(18,40),
                fenshu:fun(60,100)

            },
            {
                name:'李华',
                age:fun(18,40),
                fenshu:fun(60,100)

            },
            {
                name:'张三',
                age:fun(18,40),
                fenshu:fun(60,100)

            },
            {
                name:'李四',
                age:fun(18,40),
                fenshu:fun(60,100)

            },
            {
                name:'王五',
                age:fun(18,40),
                fenshu:fun(60,100)

            },
            {
                name:'李明',
                age:fun(18,40),
                fenshu:fun(60,100)

            },
            {
                name:'李华',
                age:fun(18,40),
                fenshu:fun(60,100)

            }
        ]
        console.log(data)
        var allUsers=document.querySelector('.allUsers') 
        var bigAge=document.querySelector('.bigAge')
        var heightFen=document.querySelector('.heightFen')
        var h2=document.querySelectorAll('h2')
        h2[0].innerHTML='所有人员基本信息'
        h2[1].innerHTML='大龄人员信息'
        h2[2].innerHTML='高分人员信息'
        allUsers.innerHTML=data.map(function(obj){
            return `<span>名字：${obj.name}</span><span>年龄：${obj.age}</span><span>分数${obj.fenshu}</span><br>`
        }).join('')
        var res1=data.filter(function(obj){
            return obj.age>=35
        })
        bigAge.innerHTML=res1.map(function(obj){
            return `<span>名字：${obj.name}</span><span>年龄：${obj.age}</span><span>分数${obj.fenshu}</span><br>`
        }).join('')
        var res2=data.filter(function(obj){
            return obj.fenshu>80
        })
        heightFen.innerHTML=res2.map(function(obj){
            return `<span>名字：${obj.name}</span><span>年龄：${obj.age}</span><span>分数：${obj.fenshu }</span><br>`
        }).join('')
    </script>
</body>
</html>